﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>项目评论列表</title>

<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/layui/css/layui.css"
	media="all">
<%-- <link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css"
	media="all"> --%>
<%-- <link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/global.css" media="all"> --%>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/personal.css" media="all">
<style type="text/css">
.article-container {
	background-color: #ffffff;
	padding-top: 20px;
	width: 1024px;
	margin: 20px auto;
}

.article_r {
	padding-top: 10px;
	float: right;
}

.pulisher, .time, .article_view, .article_comments, .article_del {
	clear: both;
	margin-right: 25px;
	font-size: 15px;
}

.title {
	font-weight: bold;
	font-size: 30px;
	text-align: center;
}

.article_content {
	background: #ffffff;
	clear: both;
	padding: 1em 4em;
	margin-top: 40px;
}

p {
	text-indent: 2em;
	text-overflow: hidden;
	font-size: 18px;
}

/*话题内容图片*/
.ImgContent {
	width: 350px;
	margin: 0px auto;
	padding: 5px;
	overflow: hidden;
}

.NavLinks {
	padding: 5px;
	width: 100px;
	height: 100px;
	float: left;
	overflow: hidden;
}

.NavLinks img {
	width: 100%;
	height: 100%;
}

.hitShowPic {
	width: 350px;
	clear: both;
	margin-left: 430px;
}

.hitShowPic span {
	font-size: 15px;
	text-align: center;
}
/*以下评论的css*/
.show_reply_list {
	margin-right: 1em;
	color: grey;
}

.comment_list {
	background-color: #ffffff;
	padding-top: 5px;
	width: 900px;
	margin: 0 auto;
}

.comment {
	width: 900px;
	margin-top: 10px;
}

.comment_details {
	float: right;
}

.comment_content {
	clear: both;
	margin: 5px 50px;
	font-size: 16px;
}

.comment_add_or_last {
	margin: 0 auto;
	clear: both;
	width: 600px;
	height: 50px;
	background: #F0F0F0;
	text-align: center;
	font-size: 20px;
	line-height: 40px; //
	行高（与div保持同高，垂直居中写法） margin-bottom: 40px;
}

.imgdiv {
	width: 80px;
	height: 70px;
	float: left;
}

.imgcss {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.comment_name {
	margin-left: 10px;
	color: #3D9EEA;
	font-size: 16px;
	font-weight: bolder;
}

.layui-icon {
	font-size: 13px;
	color: grey;
}

.del {
	float: right;
}

.del_comment {
	margin-right: 50px;
}

.reply_list {
	clear: both;
	display: none;
	width: 900px;
	padding-right: 15px;
	margin-top: 10px;
	font-size: 16px;
}

.reply {
	clear: both;
	width: 700px;
	margin: 4px auto;
}

.reply_name {
	color: #3D9EEA;
}

.del_reply {
	float: right;
}

.show_remain_reply {
	width: 600px;
	height: 40px;
	text-align: center;
	font-size: 18px;
	background-color: #F0F0F0;
	margin: 0 auto;
	line-height: 40px;
	display: none;
}
</style>

</head>
<body>

	<div class="article-container">
		<div class="article_head">
			<h1 class="title">项目标题</h1>
			<span class="pulisher">小白 发表</span> <span class="article_comments"
				title="评论"> <a id="addComments" href="#" onclick="">评论</a>
			</span> <span class="article_del" data-id="${articleDto.id}"><a
				href="javascript:void(0);" onclick="" title="删除">删除</a></span>
		</div>
	</div>
	<hr>
	<div class="comment_list">
		<h3 style="text-indent: 2em;">评论列表</h3>
		<hr>
		<div class="comment">
			<c:forEach items="${findAllSplit}" var="comments">
				<div class="conmment_details">
					<div style="float: left;">
						<span class="comment_name">${comments.user.name } </span>     <span>22分钟前</span>

					</div>
					<div class="del">
						<span class="show_reply_list" onclick="reply(${comments.id},${comments.psId})">
							<button>查看回复</button>
						</span> <i class="icon layui-icon">赞(164)</i> <a class="del_comment"
							data-id="1"> <i class="icon layui-icon">删除</i></a>
					</div>
					<div class="comment_content">  ${comments.content }</div>

					<div class="comment_content" id="${comments.id}"></div>
				</div>
			</c:forEach>
			<div class="comment_add_or_last">点击加载更多评论</div>
			<hr>
		</div>

	</div>

</body>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/project/jquery.min.js">
</script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/layui/layui.js"></script>
<script type="text/javascript">
        function reply(id,PSID){
        	//alert(PSID+"获取城市===="+id);
    	   $.ajax({
    		   url : "${pageContext.request.contextPath}/add/commentsReply.action?replyId="+id,
    		   method : "post",
    		   dataType : "json",
    		   async : true,
    			success : function(data){
    				var list = data.findAllSplit1;
    				for(var i = 0; i < list.length; i++){
    					console.log(list[i].id + "、"
								+ list[i].content);
    					var option = "<span class='reply_name'>" + list[i].user.name + "</span>回复<span class='reply_name'>" + "小黑 "+ "</span>：<span class='reply_content'>"
    					+ list[i].content + 
    					/* "</span> <a data-id='1' class='del_reply' href='#'>&nbsp;&nbsp;删除 </a><a data-id='1' onclick='sss(${comments.id})' id='${comments.id}' class='del_reply' href='${pageContext.request.contextPath}/add/addReply.action?commentsID='"+list[i].id+"&PSID="+list[i].psId+">回复 </a><br/>"; */
    					"</span> <a data-id='1' class='del_reply' href='#'>&nbsp;&nbsp;删除 </a><a data-id='1' onclick='sss("+id+","+list[i].psId+","+list[i].id+")'"+" id="+list[i].id+" class='del_reply' href='#'"+">回复 </a><br/>";
						$("#"+id).append(option);
    				}
    			},
    			error : function(){
    				alert("查看失败!!!");
    			}
    	   })
       }
        function sss(idb,psid,idd) {
			//var option = "<form action='${pageContext.request.contextPath}/add/addReply.action?r_id='"+idb +'&p_id='+psid "method='post'><input type='text' class='search-but' name='cm_content' placeholder='回复信息'> <input type='submit' class='search-but' value='回复'> </form>";
			var option = "<form action='${pageContext.request.contextPath}/add/addReply.action' method='post'>"+
			"<input type='text' class='search-but' name='cm_content' placeholder='回复信息'>"+
			"<input type='text' class='search-but' name='r_id' value= "+idb+" style='display:none'>"+
			"<input type='text' class='search-but' name='p_id' value= "+psid+" style='display:none'>"+
			"<input type='submit' class='search-but' value='回复'> </form>";
			$("#"+idd).append(option);
		}
        $('#addComments').click(function(){
        	window.location.href="${pageContext.request.contextPath}/add/addReply.action"
        	})
  </script>


</body>
</html>
